<template>
  <div class="playlist-detail">
    <loader v-if="!playlist"></loader>
    <div class="playlist-left" v-else>
      <playlist-title :playlist="playlist"></playlist-title>
      <sort-bar>
        <template #left>
          <div class="left">歌曲列表</div>
        </template>
        <template #center>
          <div class="center">{{playlist.trackCount}}首歌</div>
        </template>
        <template #right>
          <div class="right">
            播放：
            <span class="play">{{playlist.playCount}}</span>次
          </div>
        </template>
      </sort-bar>
      <playlist-table :playlist="playlist.tracks"></playlist-table>
      <div class="download">
        <p>查看更多，请下载客户端</p>
        <p>立即下载</p>
      </div>
      <sort-bar v-if="comment">
        <template #left>
          <div class="left">评论</div>
        </template>
        <template #center>
          <div class="center">共{{comment.total}}条评论</div>
        </template>
      </sort-bar>
      <my-comment></my-comment>
      <comment :comment="comment" @pageChange="pageChange"></comment>
    </div>
    <loader v-if="!playlist"></loader>
    <div class="playlist-right" v-else>
      <like-person :liker="playlist.subscribers"></like-person>
      <same-playlist :playlist="recommend"></same-playlist>
    </div>
  </div>
</template>

<script>
import PlaylistTitle from './childcpns/PlaylistTitle'
import PlaylistTable from './childcpns/PlayListTable'
import LikePerson from './childcpns/LikePerson'
import SamePlaylist from '../songdetail/childcpns/SamePlaylist'

import SortBar from '@/components/content/sortbar/SortBar'
import MyComment from '@/components/common/mycomment/MyComment'
import Comment from '@/components/common/comment/Comment'
import Loader from '@/components/common/loader/Loader'

import { _getPlaylistDetail, _getPlaylistComment, _getPlaylistRecommend } from '@/network/playlist'
export default {
  components: {
    PlaylistTitle,
    PlaylistTable,
    LikePerson,
    SamePlaylist,
    SortBar,
    MyComment,
    Comment,
    Loader
  },
  data() {
    return {
      id: null,
      playlist: null,
      comment: null,
      recommend: null
    }
  },
  created() {
    this.id = this.$route.query.id
    // 获取歌单内容
    _getPlaylistDetail(this.id).then(res => {
      this.playlist = res.playlist
    })
    // 获取歌单评论
    _getPlaylistComment(this.id, 0).then(res => {
      this.comment = res
    })
    // 获取推荐歌单
    _getPlaylistRecommend(this.id).then(res => {
      this.recommend = res.playlists
    })
  },
  methods: {
    pageChange(page) {
      _getPlaylistComment(this.id, (page - 1) * 20).then(res => {
        this.comment = res
      })
    },
    init() {
      // 页面路由跳转，重新获取所有数据
      this.id = this.$route.query.id
      _getPlaylistDetail(this.id).then(res => {
        this.playlist = res.playlist
      })
      _getPlaylistComment(this.id, 0).then(res => {
        this.comment = res
      })
      _getPlaylistRecommend(this.id).then(res => {
        this.recommend = res.playlists
      })
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.query.id !== from.query.id) {
        this.init()
      }
    }
  }
}
</script>

<style scoped>
.playlist-detail {
  display: flex;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
}

/* 左侧 */
.playlist-left {
  width: 710px;
  padding: 50px 30px 40px 40px;
}

.left {
  color: #000;
  text-align: left;
}
.center,
.right {
  color: #666;
}

.sort-bar >>> .left {
  flex: 6;
}
.sort-bar >>> .right {
  flex: 10;
  text-align: right;
}
.play {
  color: #c92a2a;
  font-weight: 700;
}

.download {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}
.download p:nth-child(2) {
  margin: 20px auto;
  width: 120px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #ff261a;
  color: #fff;
  cursor: pointer;
}
/* 右侧推荐区域 */
.playlist-right {
  width: 270px;
  padding: 20px 40px 0 30px;
  box-sizing: border-box;
  border-left: 1px solid #999;
}
</style>